<template>
  <div>
    <div class="roket" @click="handleGoTop" :class="isClicked ? 'roket-clicked' : ''">
      <div class="fire">
      </div>
    </div>     
  </div>
</template>

<script>
import Myheader from '@/components/Myheader.vue';
import WhiteSpace from '@/components/WhiteSpace.vue';
export default {
  components: { Myheader, WhiteSpace },
  // props: {
  //   isClicked: {
  //     type: Boolean,
  //     default: true,
  //   }
  // },
  data() {
    return {
      isClicked: false,
    };
  },
  methods: {
    handleGoTop() {
      console.log(123);
      // this.$emit('goTop', this.isClicked);
      window.scrollTo({ top: 0, behavior: 'smooth'});
      this.isClicked = true;
      setTimeout(() => {
        this.isClicked = false
      }, 2000);
    }
  },
  mounted() {
    console.log(this.isClicked)
  },
  watch: {
    isClicked: {
      immediate: true,
      handler(val) {
        console.log(val);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.roket, .roket-clicked {
  width: 260px;
  height: 270px;
  background: url(https://img2.baidu.com/it/u=3981169199,3642047499&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=416);
  background-size: contain;
  position: fixed;
  right: -60px;
  // bottom: 10px;
  top: 700px;
  transform: scale(0.2);
  // animation: haha 3s 0s linear infinite;
  
  &:hover {
    
  }

}
.roket-clicked {
  animation: haha 3s 0s linear infinite;
}
.fire {
  width: 500px;
  height: 450px;
  // display: none;
  background: url(https://img2.baidu.com/it/u=782883617,1051486660&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500);
  transform: rotate(180deg) scale(0.3);
  position: absolute;
  top: 70px;
  // left: 10px;
  // right: 10px;
  left: -120px;
  animation: huo 2s 0s linear infinite;

}

@keyframes haha {
  0% {
    top: 70vh;
    // left: 200px;
  }

  30% {
    top: 50vh;
    // left: 200px;
    // transform: rotate(-90deg) scale(0.3);
  }

  60% {
    top:40vh;
    // left: 200px;
  }
  100% {
    top: 30vh;
    // left: 200px;
  }
}
@keyframes huo {
  0% {
    transform: rotate(180deg) scale(0.3);
  }

  25% {
    transform: rotate(190deg) scale(0.3)
  }

  50% {
    transform: rotate(180deg) scale(0.31)
  }

  75% {
    transform: rotate(170deg) scale(0.3)
  }

  100% {
    transform: rotate(180deg) scale(0.3)
  }
}
@keyframes pic {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}
</style>
